<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="user.userName"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag v-for="tag in user.tags" plain type="primary" style="margin-right: 8px; margin-top: 8px">
        {{tag}}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
  <!--做一个降级-->
  <van-empty v-if="!userList || userList.length===0" image="search" description="暂无数据" />
</template>

<script setup>

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import MyAxios from "../plugin/myAxios.ts";
import qs from "qs"

const route = useRoute()

// 获取到数组
const {tags} = route.query;
console.log(tags);

const userList = ref([]);

const mockUser =
    {
      id: 1,
      userName: "yefan",
      userAccount: "yefan666",
      avatarUrl: "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png",
      gender: 1,
      phone: "12321321",
      email: "21312@qq.com",
      userStatus: 1,
      userRole: 0,
      createTime: new Date(),
      profile: "个人简介，还没秃头！",
      tags: ["Java", "Python", "C++", "机器学习", "数据挖掘", "男", "emo", "打工种", "社畜"]
    }

onMounted(async ()=>{
  const userListData = await MyAxios.get(
      '/user/index/tags', {
      })
      .then(function (resp) {
        console.log("/user/index/tags succeed: ", resp)
        return resp;
      })
      .catch((e)=>{
        console.error("/user/index/tags error: ",e)
      });
  if (userListData) {
    console.log("+++++", userListData)
    //console.log(JSON.parse(userListData.data.tags));

    userListData.data?.records.forEach(item => {
      console.log(JSON.parse(item.tags))
      if (item.tags) {
        item.tags = JSON.parse(item.tags);
      }
    })
    userList.value = userListData.data?.records;
  }
})


</script>

<style scoped>

</style>